<template>
  <a-col :span="workSpaceItem.width || 24">
    <div class="protal-compt-wrapper" ref="sysFastEntry">
      <a-card :bordered="false">
        <div slot="title" class="title">
          <!-- <span>{{workSpaceItem.title}}</span> -->
          <span>{{ $t('portal.easyEntry') }}</span>
          <a-icon type="form" class="edit-btn" @click="openConfig" />
        </div>
        <div class="card-content-area">
          <a-row :gutter="16">
            <a-col :span="8" v-for="(item) in entryList" :key="item.id">
              <!-- <a-badge color="#108ee9" class="badge-item" :text="item.name" @click="goto(item)" /> -->
              <div class="entry-item" @click="goto(item)">
                <div class="entry-icon-box">
                  <img class="entry-icon" :src="imgSrc(item)" alt="">
                </div>
                <p class="en-name">{{item.name}}</p>
                <p class="cn-name">{{item.description}}</p>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>
      <fast-entry-modal
       :visible="cfgModalStatus"
       :resFuncData="resFuncData"
       :workSpaceItem="workSpaceItem"
       @ok="submitOK"
       @cancel="cancelModal"
       :getContainer="getContainer">
      </fast-entry-modal>
    </div>
  </a-col>
</template>
<script>
import plm from '@/assets/img/portal/SystemQuickEntry_PLM.png'
import mdm from '@/assets/img/portal/SystemQuickEntry_MDM.png'
import ibp from '@/assets/img/portal/SystemQuickEntry_IBP.png'
import ikm from '@/assets/img/portal/SystemQuickEntry_IKM.png'
import ipm from '@/assets/img/portal/SystemQuickEntry_IPM.png'
import sis from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import rm from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import sdm from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import tdm from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import rdp from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import pis from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import kns from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import psm from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import lms from '@/assets/img/portal/SystemQuickEntry_SIS.png'
import { getComponentDataList, quickEntrys } from '@/api/devportalApi.js'
import clonedeep from 'lodash.clonedeep'
import FastEntryModal from './FastEntryModal'
let userId = '4430'||JSON.parse(sessionStorage.getItem('userInfo')).loginName, envName = process.env.NODE_ENV
  export default {
    name: 'SystemFastEntry',
    props: {
      dataUrl: {
        type: String,
        defualt: ''
      },
      workSpaceItem: {
        type: Object,
        defualt: () => ({})
      }
    },
    data () {
      return {
        cfgModalStatus: false,
        resFuncData: [],
        entryList: []
      }
    },
    components: {
      FastEntryModal
    },
    methods: {
      
      imgSrc (item) {
        // console.log(item);
        
        // return ibp
        // if (item.icon && item.icon.startsWith('http')) {
        //   return item.icon
        // }
        if (item.id == 7) {return sis}    //修正
        if (item.id == 3) {return plm}    //修正
        if (item.id == 9) {return mdm}    
        if (item.id == 8) {return ikm}
        if (item.id == 11) {return rm}
        if (item.id == 14) {return sdm}
        if (item.id == 13) {return tdm}
        if (item.id == 15) {return ipm}
        if (item.id == 16) {return ibp}     //修正
        if (item.id == 17) {return mdm}     //修正
        if (item.id == 18) {return ikm}    //修正
        if (item.id == 19) {return rm}    //需求管理平台
        if (item.id == 20) {return tdm}    //实验管理平台
        if (item.id == 21) {return sdm}     //仿真管理平台
        if (item.id == 23) {return sis}     //标准信息管理平台
        if (item.id == 24) {return rdp}     //研发管理平台
        return sis
      },
      openConfig () {
        this.cfgModalStatus = true
      },
      submitOK () {
        this.$emit('refreshPersonalConfig')
        this.cfgModalStatus = false
      },
      cancelModal () {
        this.cfgModalStatus = false
      },
      getContainer () {
        return this.$refs.sysFastEntry
      },
      filterData (prevList, nextList) {
        return prevList.filter(item => {
          return nextList.some(cfgItem => cfgItem.contentId == item.id)
        })
      },
      getLevelAndShow () {
        getComponentDataList(this.dataUrl).then(res => {
          let data = res.data.content ? res.data.content : []
          this.resFuncData = clonedeep(data)
          let maxLength
          let filterData
          if (this.workSpaceItem.personalConfig && this.workSpaceItem.personalConfig.contentSortList.length > 0) {
            let contentSortList = this.workSpaceItem.personalConfig.contentSortList
            filterData = this.filterData(data, contentSortList)
            filterData.forEach(item => {
              item.rank = contentSortList.find(obj => obj.contentId == item.id).rank
            })
            if (this.workSpaceItem.personalConfig.num !== undefined) {
              maxLength = this.workSpaceItem.personalConfig.num
            }
          } else {
            filterData = data
          }
          filterData.sort((a,b) => a.rank - b.rank)
          let promiseArr = []
          let idData = []
          filterData.forEach((item, index) => {
            let promise = new Promise(resolve => {
              //返回图片相关参数
              quickEntrys(`id=${item.id}`).then(res1 => {
                // console.log(res1,'99999999999999999999999999999999999');
                resolve(res1)
              })
            })
            idData.push(index)
            promiseArr.push(promise)
          })
          Promise.all(promiseArr).then(resArr => {
            resArr.forEach((res2, idx) => {
              if (res2 && res2.status === 200) {
                let icon = 'data:image/png;base64,' + btoa(
                  new Uint8Array(res2.data)
                    .reduce((data1, byte) => data1 + String.fromCharCode(byte), '')
                )
                filterData[idData[idx]].newIcon = icon
              }
            })
            if (maxLength) {
              this.entryList = filterData.slice(0, maxLength)
            } else {
              this.entryList = filterData
            }
      // console.log(this.entryList,'8888888888888888888888');

           this.entryList.forEach(item => {
             if(item.description === "物料管理平台") {
               let MDMRoutersUrl = ""
               if (envName === 'development' || envName === 'online' || envName === 'test') {
                 MDMRoutersUrl = `http://10.0.14.112:8081/mdm/materialApply/materialToPage.do?account=${userId}`
                 item.link = MDMRoutersUrl
               } else {
                 MDMRoutersUrl = `http://dm.sany.com.cn/mdm/materialApply/materialToPage.do?account=${userId}`
                 item.link = MDMRoutersUrl
               }
             }
           })
          })
          if (maxLength) {
            this.entryList = filterData.slice(0, maxLength)
          } else {
            this.entryList = filterData
          }
        })
      },
      goto (item) {
        window.open(item.link)
      }
    },
    mounted () {
      if (this.dataUrl) {
        this.getLevelAndShow()
      }
      
    },
    watch: {
      workSpaceItem: {
        handler: function () {
          // let contentSortList = this.workSpaceItem.personalConfig.contentSortList
          // let filterData = this.filterData(this.resFuncData, contentSortList)
          // filterData.forEach(item => {
          //   item.rank = contentSortList.find(obj => obj.contentId == item.id).rank
          // })
          // filterData.sort((a,b) => a.rank - b.rank)
          // this.entryList = filterData
          this.getLevelAndShow()
        },
        deep: true
      }
    }
  }
</script>
<style lang="less" scoped>
@import '~@/views/devportal/portalModules/index.less';
// .badge-item {
//   cursor: pointer;
//   margin-bottom: 20px;
// }
.entry-item {
  height: 80px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 12px;
  .en-name,.cn-name {
    margin: 0px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #868686;
  }
  .en-name {
    font-size: 14px;
    color: #484848;
  }
  .entry-icon-box {
    background-color: #f3f3f3;
    display: inline-block;
    padding: 6px;
    border-radius: 3px;
  }
  .entry-icon {
    width: 24px;
    display: block;
  }
}
.entry-item:hover {
  .entry-icon-box {
    background-color: #e0e7ff;
    color: #e0e7ff;
  }
  // .en-name,.cn-name {
  //   color: #274fde;
  // }
}
</style>